Ce tutorial fait suite au tutorial MVVM-ListView et reprend l'application des voeux en ajoutant la persistance et les actions (CR)UD manquantes...

crud

CRUD correspond à

Autrement dit, cela correspond aux fonctions de bases pour manipuler les données.

Interaction avec la base de données

Alt text

CRUD implique le stockage des données. Dans l'environnement .NET, le réflexe est d'utiliser EntityFramework qui est un ORM (Object Relational Mapping) qui permet, pour les cas généraux, d'utiliser une simple API plutôt que d'écrire des requêtes SQL à la main...

SGBD

Alt text

EntityFramework fonctionne avec les backends standards et pour des raisons de simplification, SQLite sera utilisé dans ce tutorial.

Alt text

Installation

Accéder au gestionnaire nuget :

nuget

Installer le paquet

Microsoft.EntityFrameworkCore.Sqlite

Alt text

Ce paquet installera aussi EntityFramework grâce au système de dépendances...

Situation initiale

Jusque là, le modèle s'était borné à un simple "String", certes pratique dans le cadre d'un exercice mais pas tout à fait réaliste.

Modèle basique

Une manière de convertir un voeu représenté par du texte en une classe pourrait être quelque-chose comme ça:

public class Wish
{
    /* Définition du voeu, par exemple 
    "marcher sur la lune" */
    public string? Definition {get;set;} 

    /* Date à laquelle le voeu a été exaucé */
    public DateTime AccomplishedDate{get;set;}
}

Pour garder un projet en ordre, ce modèle trouvera sa place dans un dossier Models :

Alt text

Adaptation pour la base de données

Pour que le modèle puisse être stocké en base de données avec EF (EntityFramework), il faut ajouter une propriété pour la clé primaire (Id) et déclarer le DbContext

Id pour Wish

Alt text

DbContext

Créer le fichier dans un nouveau dossier nommé services

Alt text

Dont voici le contenu:
Alt text

CREATE

À la création d'un voeu, on va l'insérer en base de données en plus de mettre à jour la liste locale:

Alt text

READ

Étant donné qu'on insère des données en base, il faut désormais charger ces données depuis la DB au lancement de la page:

Alt text

UPDATE

Comment faire pour mettre à jour un voeu ?

On charge la version en base de données correspondante (utilisation implicite des Id[clé primaire]) et on la met à jour en demandant une synchronisation.

Alt text

Vue

Voici ce qu'on verra en cliquant sur le crayon:

Alt text

DELETE

Il reste encore à gérer la suppression. À nouveau, grâce à EF qui reconnaît les Ids, cette étape est vraiment très simple:

Alt text

L'édition et la suppression n'ont pas encore de bouton associés dans la vue et il faut donc les ajouter.

UPDATE et DELETE

On va avoir besoin d'une référence sur le ViewModel pour lier les actions, il faut donc être certain d'avoir un x:Name ici:

Alt text

Il subsiste actuellement un bogue avec les ListView lorsqu'on ajoute des boutons à l'intérieur, on va donc convertir la ListView en CollectionView qui a le mérite d'être beaucoup plus flexible au niveau du design.
À part ça, on ajoute 2 boutons, 1 sous forme d'icône et l'autre sous forme textuelle ce qui donne le rendu suivant:

Alt text

Et voici le XAML correspondant:

Alt text

Image MAUI

Pour intégrer des images dans MAUI, le plus simple est d'utiliser un SVG à partir duquel le compilateur générera automatiquement les png de la bonne taille selon les devices cibles.

Le plus simple est donc de glisser-déposer un SVG

Alt text

ici:

Alt text

Et ensuite le référencer en tant que image.png (changer l'extension).

Une version plus orientée smartphone pourrait ressembler à ça:

Alt text

Pour cette partie c'est à vous de jouer sachant qu'un mot clé intéressant est SWIPE ;-)

Suite à cet exercice, les compétences suivantes ont été travaillées: